<!-- Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/ -->

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'

import { highlightColors } from '#shared/components/Form/fields/FieldEditor/features/color-picker/colors/colors-highlight.ts'
import type { HighlightColor } from '#shared/components/Form/fields/FieldEditor/features/color-picker/colors/types.ts'

import CommonPopover from '#desktop/components/CommonPopover/CommonPopover.vue'
import { usePopover } from '#desktop/components/CommonPopover/usePopover.ts'
import CommonPopoverMenu from '#desktop/components/CommonPopoverMenu/CommonPopoverMenu.vue'
import type { MenuItem } from '#desktop/components/CommonPopoverMenu/types.ts'
import { useThemeStore } from '#desktop/stores/theme.ts'

interface ExtendedMenuItem extends MenuItem, Omit<HighlightColor, 'label'> {}

const items = highlightColors.map((color) => {
  return {
    key: `${color.label}`,
    ...color,
  }
})

const colorLabels = highlightColors.map((color) => color.label)

const color = defineModel<ExtendedMenuItem>('currentColor') // Remove if we might not need it to read it from parent

const isActive = ref(false)

const { popover, popoverTarget, toggle, close, isOpen } = usePopover()

const { isDarkMode } = storeToRefs(useThemeStore())

const selectColor = (event: ExtendedMenuItem) => {
  color.value = event
  close()
  isActive.value = true
}

const toggleHighlighterActive = () => {
  isActive.value = !isActive.value
}

onMounted(() => {
  color.value = items[0]
})
</script>

<template>
  <div>
    <div class="flex items-center gap-1">
      <button
        class="flex items-center gap-2 bg-(--highlight-color)"
        :style="{
          '--highlight-color': isDarkMode ? color?.value?.dark : color?.value?.light,
          background: !isActive ? 'transparent' : undefined,
        }"
        @click="toggleHighlighterActive"
      >
        <CommonIcon size="xs" name="highlighter" />
        <CommonLabel
          class="rounded-xs p-1 text-xs"
          :class="{ 'text-black! dark:text-white!': isActive }"
          :style="{ backgroundColor: isActive ? color?.value : undefined }"
          >{{ $t('Highlight') }}</CommonLabel
        >
      </button>
      <CommonIcon
        ref="popoverTarget"
        class="cursor-pointer text-gray-100 transition-transform dark:text-neutral-400"
        :class="{ 'rotate-180': isOpen }"
        role="button"
        size="xs"
        name="chevron-down"
        @click="toggle(true)"
      />
    </div>

    <CommonPopover ref="popover" placement="arrowEnd" :owner="popoverTarget">
      <CommonPopoverMenu class="overflow-clip" :items="items" :popover="popover">
        <template v-for="(label, index) in colorLabels" #[`item-${label}`]="item" :key="label">
          <button
            :aria-label="$t((item as ExtendedMenuItem).name)"
            class="relative flex grow items-center gap-2 p-2.5 text-gray-100 outline-hidden dark:text-neutral-400"
            :class="{
              'bg-blue-600 text-black dark:bg-blue-900 dark:text-white':
                (item as ExtendedMenuItem).id === color?.id,
              'rounded-t-lg': index === 0,
              'rounded-b-lg': index === colorLabels.length - 1,
              'after:absolute after:bottom-0 after:left-1/2 after:h-[1px] after:w-[calc(100%-1rem)] after:-translate-x-1/2 after:bg-neutral-100 after:dark:bg-gray-900':
                index !== colorLabels.length - 1,
            }"
            @click="selectColor(item as ExtendedMenuItem)"
          >
            <span
              class="inline-block h-4 w-4"
              :style="{
                backgroundColor: (item as ExtendedMenuItem).value.light,
              }"
            />
            <CommonLabel class="p-1 text-current">{{ $t(label) }}</CommonLabel>
            <Transition name="fade">
              <CommonIcon
                v-if="(item as ExtendedMenuItem).id === color?.id"
                class="rtl:-order-1"
                size="small"
                name="check2"
              />
            </Transition>
          </button>
        </template>
      </CommonPopoverMenu>
    </CommonPopover>
  </div>
</template>
